<template>
  <el-dialog
    :model-value="visible"
    @update:model-value="$emit('update:visible', $event)"
    title="理财产品详情"
    width="800px"
  >
    <div class="product-detail-content" v-if="product">
      <div class="detail-header">
        <h3>{{ product.name }}</h3>
        <div class="detail-tags">
          <el-tag :type="getRiskTagType(product.riskLevel)">
            {{ getRiskLevelText(product.riskLevel) }}
          </el-tag>
          <el-tag :type="getStatusTagType(product.status)">
            {{ getStatusText(product.status) }}
          </el-tag>
        </div>
      </div>

      <div class="detail-sections">
        <div class="detail-section">
          <h4>产品信息</h4>
          <div class="detail-grid">
            <div class="detail-item">
              <span class="item-label">预期年化收益率：</span>
              <span class="item-value highlight">{{ formatRate(product.expectedReturn) }}%</span>
            </div>
            <div class="detail-item">
              <span class="item-label">投资期限：</span>
              <span class="item-value">{{ product.duration }}天</span>
            </div>
            <div class="detail-item">
              <span class="item-label">起购金额：</span>
              <span class="item-value">¥{{ formatAmount(product.minAmount) }}</span>
            </div>
            <div class="detail-item">
              <span class="item-label">产品规模：</span>
              <span class="item-value">¥{{ formatAmount(product.targetAmount) }}</span>
            </div>
            <div class="detail-item">
              <span class="item-label">已售金额：</span>
              <span class="item-value">¥{{ formatAmount(product.salesAmount) }}</span>
            </div>
            <div class="detail-item">
              <span class="item-label">产品管理人：</span>
              <span class="item-value">{{ product.manager || '苏州虚拟银行' }}</span>
            </div>
          </div>
        </div>

        <div class="detail-section">
          <h4>产品简介</h4>
          <p class="product-description">
            {{ product.description }}
          </p>
        </div>

        <div class="detail-section" v-if="product.riskDescription">
          <h4>风险提示</h4>
          <p class="risk-description">
            {{ product.riskDescription }}
          </p>
        </div>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="$emit('update:visible', false)">关闭</el-button>
        <el-button 
          type="primary" 
          @click="$emit('purchase')"
          :disabled="product && product.status !== 1"
        >
          立即购买
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { formatAmount, formatRate, getRiskLevelText, getRiskTagType, getStatusText, getStatusTagType } from './utils';

defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  product: {
    type: Object,
    default: null
  }
});

defineEmits(['update:visible', 'purchase']);
</script>

<style scoped>
.product-detail-content {
  padding: 8px;
}

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #ebeef5;
}

.detail-header h3 {
  margin: 0;
  font-size: 20px;
  color: #303133;
}

.detail-tags .el-tag {
  margin-left: 8px;
}

.detail-sections {
  space-y: 24px;
}

.detail-section {
  margin-bottom: 24px;
}

.detail-section h4 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
  font-weight: 600;
}

.detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.detail-item {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.item-label {
  color: #909399;
  font-size: 14px;
}

.item-value {
  color: #303133;
  font-weight: 500;
  font-size: 14px;
}

.item-value.highlight {
  color: #e6a23c;
  font-weight: 600;
}

.product-description,
.risk-description {
  line-height: 1.6;
  color: #606266;
  font-size: 14px;
  margin: 0;
}

.risk-description {
  color: #f56c6c;
  background-color: #fef0f0;
  padding: 12px;
  border-radius: 4px;
  border-left: 4px solid #f56c6c;
}

.dialog-footer {
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .detail-grid {
    grid-template-columns: 1fr;
  }
}
</style>
